import React from "react";
import { TabBar } from 'antd-mobile';
// 引入路由组件
import { Route } from "react-router-dom";

//引入页面的组件
// 首页
import Home from './home/index';
// 列表找房
import Found from './found/index';
// 我的
import My from './my/index'


class KZTabBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
        };
    }

    render() {
        return (<div>
            {/* 🚩1.先实现配置 路由的嵌套 */}
            {/* 
            <Route path="/home" component={Home}></Route>
            <Route path="/home/found" component={Found}></Route>
            <Route path="/home/my" component={My}></Route> 
            */}
            {/* 🚩2.再结合UI组件去实现路由路转 */}
            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
                <TabBar
                    unselectedTintColor="#888"
                    tintColor="#21b97a"
                    barTintColor="white"
                >
                    <TabBar.Item
                        title="首页"
                        key="index"
                        // fontSize 使用驼峰命名
                        icon={<i style={{ fontSize: 24 }} className="iconfont icon-ind"></i>}
                        selectedIcon={<i style={{ color: "#21b97a", fontSize: 24 }} className="iconfont icon-ind" ></i>}
                        //🚩4. 判断当前选中的项 “当前页面的路由url” === "home"
                        selected={this.props.location.pathname === '/home'}
                        onPress={() => {
                            // console.log("🚩4.点击首页", this);
                            // 🚩实现对应路由的跳转
                            this.props.history.push("/home")
                            this.setState({
                                selectedTab: 'blueTab',
                            });
                        }}
                        data-seed="logId"
                    >
                        {/* {this.renderContent('Life')} -----3.🚩显示组件内容的位置*/}
                        <Route path="/home" component={Home}></Route>
                    </TabBar.Item>
                    <TabBar.Item
                        // icon图标
                        icon={<i style={{ fontSize: 24 }} className="iconfont icon-findHouse"></i>}
                        selectedIcon={<i style={{ color: "#21b97a", fontSize: 24 }} className="iconfont icon-findHouse" ></i>}
                        title="找房"
                        key="found"
                        selected={this.props.location.pathname === '/home/found'}
                        onPress={() => {
                            // console.log("找房", this);
                            this.props.history.push("/home/found")
                            this.setState({
                                selectedTab: 'redTab',
                            });
                        }}
                        data-seed="logId1"
                    >
                        {/* {this.renderContent('Koubei')}  -----显示组件内容的位置*/}
                        <Route path="/home/found" component={Found}></Route>
                    </TabBar.Item>
                    <TabBar.Item
                        // icon图标
                        icon={<i style={{ fontSize: 24 }} className="iconfont icon-my"></i>}
                        selectedIcon={<i style={{ color: "#21b97a", fontSize: 24 }} className="iconfont icon-my" ></i>}
                        title="我的"
                        key="my"
                        selected={this.props.location.pathname === '/home/my'}
                        onPress={() => {
                            this.props.history.push("/home/my")
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >
                        {/* {this.renderContent('Friend')} --------显示组件内容的位置*/}
                        <Route path="/home/my" component={My}></Route>
                    </TabBar.Item>
                </TabBar>
            </div>
        </div>
        );
    }
}

export default KZTabBar;